Riot.js-এ Parent এবং Child Components এর মধ্যে ডেটা আদান-প্রদান করা খুবই সহজ এবং তা props এবং events ব্যবহার করে করা যায়। Riot.js এ Parent Component থেকে Child Component-এ ডেটা পাস করতে হলে opts (options) ব্যবহার করতে হবে এবং Child Component থেকে Parent Component-এ ডেটা পাঠাতে হলে ইভেন্ট ব্যবহার করতে হবে।
১. Parent Component থেকে Child Component-এ ডেটা পাস করা
Riot.js-এ Parent Component এর মাধ্যমে Child Component-এ ডেটা পাস করার জন্য opts (options) ব্যবহার করা হয়। opts হল সেই ডেটা যা Parent Component এর মাধ্যমে Child Component কে পাস করা হয়।
উদাহরণ:
Parent Component (App.riot)
<!-- src/components/App.riot -->
<app>
<h1>Welcome to Riot.js</h1>
<child-component title="Hello from Parent!" message={parentMessage}></child-component>
<button onclick={changeMessage}>Change Parent Message</button>
<script>
import './Child.riot';
export default {
onMounted() {
this.parentMessage = 'This is the parent message.';
},
changeMessage() {
this.parentMessage = 'Parent message has been updated!';
}
}
</script>
</app>
এখানে, parentMessage প্যারেন্ট কম্পোনেন্টের একটি ডেটা, যা child-component কে message নামে পাস করা হচ্ছে। এছাড়াও, title নামে একটি স্ট্যাটিক ডেটা পাস করা হচ্ছে।
Child Component (Child.riot)
<!-- src/components/Child.riot -->
<child-component>
<h2>{opts.title}</h2>
<p>{opts.message}</p>
<button onclick={notifyParent}>Notify Parent</button>
<script>
export default {
notifyParent() {
this.emit('childEvent', 'Hello Parent, I am the Child!');
}
}
</script>
</child-component>
এখানে:
opts.titleএবংopts.messageদিয়ে Parent Component থেকে Child Component এ পাস করা ডেটা অ্যাক্সেস করা হচ্ছে।- একটি
notifyParentফাংশন রয়েছে, যা Parent Component-এ ইভেন্ট পাঠানোর জন্য ব্যবহৃত হবে।
২. Child Component থেকে Parent Component-এ ডেটা পাঠানো
Riot.js-এ Child Component থেকে Parent Component-এ ডেটা পাঠাতে হলে emit ফাংশন ব্যবহার করতে হয়। emit ফাংশনটি একটি কাস্টম ইভেন্ট তৈরি করে এবং Parent Component সেটি শ্রবণ (listen) করতে পারে।
উদাহরণ:
Parent Component (App.riot)
<!-- src/components/App.riot -->
<app>
<h1>Welcome to Riot.js</h1>
<child-component title="Hello from Parent!" message={parentMessage} onchildEvent={handleChildEvent}></child-component>
<p>{childMessage}</p>
<script>
import './Child.riot';
export default {
onMounted() {
this.parentMessage = 'This is the parent message.';
this.childMessage = '';
},
handleChildEvent(event) {
this.childMessage = event.detail; // Child থেকে পাওয়া বার্তা
}
}
</script>
</app>
এখানে:
- Parent Component
onchildEventইভেন্টের মাধ্যমে Child Component এরchildEventইভেন্টটি গ্রহণ করছে। - ইভেন্টের
detailপ্রপার্টি দ্বারা Child Component থেকে পাঠানো ডেটা নেওয়া হচ্ছে।
Child Component (Child.riot)
<!-- src/components/Child.riot -->
<child-component>
<h2>{opts.title}</h2>
<p>{opts.message}</p>
<button onclick={notifyParent}>Notify Parent</button>
<script>
export default {
notifyParent() {
this.emit('childEvent', 'Hello Parent, I am the Child!');
}
}
</script>
</child-component>
এখানে, notifyParent ফাংশনটি childEvent নামক কাস্টম ইভেন্ট তৈরি করছে এবং Parent Component এর কাছে ডেটা পাঠাচ্ছে।
সারাংশ
- Parent থেকে Child এ ডেটা পাস করতে
opts(options) ব্যবহার করুন। - Child থেকে Parent এ ডেটা পাঠাতে
emitএবং ইভেন্ট লিসেনিং ব্যবহার করুন।
এভাবে, Riot.js-এ Parent এবং Child Components এর মধ্যে ডেটা আদান-প্রদান করা হয়।
আপনি যদি কোনো নির্দিষ্ট প্রশ্ন বা সমস্যা নিয়ে কাজ করতে চান, আমি আরও বিস্তারিতভাবে সহায়তা করতে পারি!
Read more
